import React from 'react';
import PropTypes from 'prop-types';
import {
    Image,
    Text,
    StyleSheet,
    TouchableOpacity,
    Platform,
} from 'react-native';

import { BarContainer } from './comp.bar-container';

export default class TopBar extends React.Component {

    static propTypes = {
        displayed: PropTypes.bool,
        title: PropTypes.string,
        height: PropTypes.number,
        backTitle: PropTypes.string,
        backImage: PropTypes.any,
        rightTitle: PropTypes.string,
        rightImage: PropTypes.any,
        onBack: PropTypes.func,
        onRight:PropTypes.func,     //添加onRight事件，显示Right
    };

    static defaultProps = {
        displayed: false,
        title: '',
        backTitle: '返回',
        rightTitle:'',
        backImage: require('../../img/angle-left.png'),
        rightImage: require('../../img/btn_right_more.png'),
    };

    renderBackButton() {
        const { onBack, backImage } = this.props;

        // do not display back button if there isn't a press handler
        if (onBack) {
            return (
                <TouchableOpacity style={styles.backContainer} onPress={onBack}>
                    <Image source={backImage} />
                    {Platform.OS === 'ios' &&
                    <Text style={[styles.text, styles.backText]}>
                        {this.props.backTitle}
                    </Text>}
                </TouchableOpacity>
            );
        }

        return null;
    }

    renderRightButton() {
        const { onRight, rightImage } = this.props;

        // do not display back button if there isn't a press handler
        if (onRight) {
            return (
                <TouchableOpacity style={styles.rightContainer} onPress={onRight}>
                    <Image style={styles.rightImage} source={rightImage} />
                </TouchableOpacity>
            );
        }

        return null;
    }

    render() {
        const {
            displayed,
            title,
            height,
        } = this.props;

        return (
            <BarContainer
                style={styles.container}
                displayed={displayed}
                height={height}
            >
                {this.renderBackButton()}

                {this.renderRightButton()}
                <Text style={styles.text}>{title}</Text>
            </BarContainer>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        paddingTop: 30,
    },
    text: {
        fontSize: 18,
        color: 'white',
    },
    backContainer: {
        position: 'absolute',
        flexDirection: 'row',
        left: 0,
        top: 16,
        alignItems:'center',
    },
    backText: {
        marginLeft: -10,
    },
    rightContainer: {
        position: 'absolute',
        flexDirection: 'row',
        right: 0,
        top: 16,
        alignItems:'center',
    },
    rightImage:{
    },
    rightText: {
        marginLeft: -10,
    },
});
